<template>
  <div>
    <el-card>
      <el-row :gutter="30">
        <el-col :span="2">
          <el-date-picker value-format="YYYY-MM-DD" v-model="startdate" type="date" placeholder="开始日"
            style="width:100px;" />
        </el-col>
        <el-col :span="2">
          <el-date-picker value-format="YYYY-MM-DD" v-model="enddate" type="date" placeholder="截止日"
            style="width:100px; margin-left: 10px;" />
        </el-col>
        <el-col :span="3">
          <el-input v-model="articleName" placeholder="请输入文章类型" style=" margin-left: 20px;"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="searchArticleType">
            <svg-icon name="search" width="20px" height="20px" style="padding-right: 5px;"></svg-icon>
          </el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="3">
          <el-button type="danger" style="margin-top: 20px;" @click="deleteArticleTypes">
            <svg-icon name="delete" width="20px" height="20px" style="padding-right: 5px;"></svg-icon>
            批量删除</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" style="margin-top: 20px;" @click="addType">
            <svg-icon name="add" plain width="20px" height="15px" style="padding-right: 5px;"></svg-icon>
            添加类型
          </el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <!-- 树形表格  -->
          <el-table :data="artcleType" stripe row-key="id" border style="margin-top: 30px;"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" :reserve-selection="true" />
            <el-table-column prop="id" label="ID" width="70" />
            <el-table-column prop="typeName" label="文章类型名称">
            </el-table-column>
            <el-table-column prop="typeName2" label="上级类型">
            </el-table-column>
            <el-table-column prop="typeSort" label="排序" sortable width="80">
            </el-table-column>
            <el-table-column prop="typeDesc" label="描述" width="150">
            </el-table-column>
            <el-table-column prop="typeTime" label="加入时间" width="150">
            </el-table-column>
            <el-table-column prop="typeStatus" label="状态" width="100">
              <template #default="scope">
                <el-switch v-model="scope.row.typeStatus" class="ml-2" :disabled="scope.row.ban"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" inline-prompt :active-icon="Check"
                  :inactive-icon="Close" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" size="small" @click="ban(scope.row)">
                  <svg-icon name="download" plain width="20px" height="15px" style="padding-right: 5px;"></svg-icon>
                </el-button>
                <el-button type="primary" size="small" @click="editColumnById(scope.row)">
                  <svg-icon name="pen" width="20px" height="10px" style="padding-right: 5px;"></svg-icon>
                </el-button>
                <el-popconfirm width="220" :icon="InfoFilled" icon-color="#626AEF" :title="`确认删除 ${scope.row.name} 吗？`"
                  @confirm="deleteArticleType(scope.row)">
                  <template #reference>
                    <el-button type="danger" size="small">
                      <svg-icon name="delete" width="20px" height="15px" style="padding-right: 5px;"></svg-icon>
                    </el-button>
                  </template>
                  <template #actions="{ confirm, cancel }">
                    <el-button size="small">不!</el-button>
                    <el-button type="danger" size="small" @click="confirm">
                      确认？
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-dialog v-model="dialogFormVisible" :title="title" width="500" :before-close="cancel">
        <el-form :model="form" :rules="rules">
          <el-form-item label="文章类型" label-width="100" label-position="top" prop="typeName">
            <el-select v-model="form.typeName" placeholder="请选择文章类型">
              <el-option lable="小说" value="小说"></el-option>
              <el-option lable="散文" value="散文"></el-option>
              <el-option lable="诗集" value="诗集"></el-option>
              <el-option lable="议论文" value="议论文"></el-option>
              <el-option lable="记叙文" value="议论文"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文章名称" label-width="100" label-position="top" prop="typeName2">
            <el-input v-model="form.typeName2" autocomplete="off" placeholder="5个左右,8汉字以内,用英文,隔开" />
          </el-form-item>
          <el-form-item label="排序" label-width="100" label-position="top" prop="typeSort">
            <el-input v-model="form.typeSort" placeholder="请输入数字"></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="100" label-position="top" prop="typeStatus">
            <el-radio-group v-model="form.typeStatus">
              <el-radio :value=true size="large">启用</el-radio>
              <el-radio :value=false size="large">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="描述" label-width="100" label-position="top" prop="typeDesc">
            <el-input v-model="form.typeDesc" :rows="2" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="saveOrUpdata">
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 分页器 -->
      <el-pagination size="small" v-model:current-page="pageNo" @current-change="searchArticleType"
        @size-change="searchArticleType" v-model:page-size="limit" :page-sizes="[3, 5, 10, 20]" :total="total"
        :background="true" layout="prev, pager, next, jumper,->,sizes, total"
        style="margin-top: 20px;text-align: center;">
      </el-pagination>

    </el-card>
  </div>
</template>

<script setup >
import { ref, onMounted, reactive } from "vue"
import useArtcleTypeStore from "@/store/modules/artcleType"
import { Check, Close, InfoFilled } from '@element-plus/icons-vue'

let startdate = ref("")
let enddate = ref("")
let artcleType = ref([])
let title = ref("")
let pageNo = ref(1)
let limit = ref(3)
let total = ref(0)

let articleName = ref("")

let artcleTypeStore = useArtcleTypeStore()

let dialogFormVisible = ref(false)

const select_order_number = ref('') //表格select选中的条数
const select_orderId = ref([]) //表格select复选框选中的id
const multipleSelection = ref([])

let form = ref({
  typeName: "",
  typeName2: "",
  typeSort: "",
  typeStatus: "",
  typeDesc: ""
})

const getArtcleType = () => {
  artcleTypeStore.getArtcleType(pageNo.value, limit.value).then(res => {
    artcleType.value = artcleTypeStore.artcletype
  });
  artcleTypeStore.getArtcleTypeNumber().then(res => {
    total.value = parseInt(res)
  })
}

onMounted(() => {
  getArtcleType()
})

const addType = () => {
  dialogFormVisible.value = true
  title.value = '添加文章类型'
  form.id = null
  form.typeName = ""
  form.typeName2 = ""
  form.typeSort = ""
  form.typeStatus = ""
  form.typeDesc = ""

}

const save = () => {
  artcleTypeStore.addArtcleType(form.value).then(res => {
    dialogFormVisible.value = false
    getArtcleType()

  })
}

const ban = (row) => {
  //获取这一行中的开关组件
  row.ban = !row.ban
}

const deleteArticleType = (row) => {
  artcleTypeStore.deleteArtcleType(row.id).then(res => {
    getArtcleType()
  })
}



const deleteArticleTypes = () => {
  if (select_orderId.value.length === 0) {
    ElMessage.error('请选择要删除的数据')
    return
  }

  artcleTypeStore.deleteArtcleTypes(select_orderId.value).then(res => {
    console.log(res)
    getArtcleType()
  })
}

//当表格选择项发生变化时会触发该事件
const handleSelectionChange = (val) => {
  // 解决来回切换页面，也无法清除上次选中情况
  multipleSelection.value = val;
  select_order_number.value = multipleSelection.value.length;
  select_orderId.value = [];
  if (val) {
    undefined;
    val.forEach((row) => {
      undefined;
      if (row) {
        undefined;
        select_orderId.value.push(row.id);
      }
    });
  }
  console.log(select_orderId.value);
}

const editColumnById = (row) => {

  form.value.typeName = row.typeName
  form.value.typeName2 = row.typeName2
  form.value.typeSort = row.typeSort
  form.value.typeStatus = row.typeStatus
  form.value.typeDesc = row.typeDesc
  form.value.id = row.id

  title.value = '编辑文章类型'
  dialogFormVisible.value = true

}

const cancel = () => {
  dialogFormVisible.value = false
  form.value.id = null
  form.value.typeName = ""
  form.value.typeName2 = ""
  form.value.typeSort = ""
  form.value.typeStatus = ""
  form.value.typeDesc = ""
}

const saveOrUpdata = () => {
  if (form.value.id == null) {
    //判断是否为空
    if (form.value.typeName == "" || form.value.typeName2 == "" || form.value.typeSort == "" || form.value.typeStatus == "" || form.value.typeDesc == "") {
      ElMessage.error('请输入完整信息')
      return
    }
    save()
  } else {
    if (form.value.typeName == "" || form.value.typeName2 == "" || form.value.typeSort == "" || form.value.typeStatus == "" || form.value.typeDesc == "") {
      ElMessage.error('请输入完整信息')
      return
    }
    editSubColumn()
  }
}

const editSubColumn = () => {
  artcleTypeStore.updateArtcleType(form.value).then(res => {
    console.log(res)
    dialogFormVisible.value = false
    getArtcleType()
  })
}

const searchArticleType = () => {
  var data = {
    articleName: articleName.value,
    startDate: startdate.value,
    endDate: enddate.value,
    pageStart: (pageNo.value - 1) * limit.value,
    pageEnd: limit.value * pageNo.value
  }
  artcleTypeStore.searchArtcleType(data).then(res => {
    artcleType.value = artcleTypeStore.artcletype
  })
}

const rules = reactive({
  typeName: [
    { required: true, message: '请输入文章类型', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ],
  typeName2: [
    { required: true, message: '请输入文章类型名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ],
  typeSort: [
    { required: true, message: '请输入文章类型排序', trigger: 'blur' },
  ],
  typeStatus: [
    { required: true, message: '请输入文章类型状态', trigger: 'blur' },
  ],
  typeDesc: [
    { required: true, message: '请输入文章类型描述', trigger: 'blur' },
  ]

})

</script>



<style scoped lang="scss"></style> 